<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#container div{
				width: 100px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				margin-top: 20px;
				border-radius: 15px;
			}
			.btn{
				background-color: #ccc;
				color: #fff;
			}
			.button{
				background-color: #ccc;
				color: #fff;
			}
			.btn_enable{
				background-color: lightgreen;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<input type="checkbox" v-model="isAgree"/>同意以上协议<br>
			
			<!-- 属性三元运算 -->
			<div v-bind:class="isAgree == true ? 'btn_enable' : 'btn'">注册</button>
			
			<!-- 对象动态绑定 -->
			<div v-bind:class="{btn:!isAgree,btn_enable:isAgree}">登录</button>
			<!-- 样式覆盖 -->
			<div v-bind:style="{backgroundColor: 'green'}">登录</button>
			<div v-bind:style="{'background-color': 'green'}">登录</button>
			<div :style="[ft,bg]">登录</button>
			
			<!-- 数组对象绑定 -->
			<div :class="['button',btn_]">注销</button>
			<div v-bind:class="[isAgree == true ? 'btn_enable' : 'btn']">注销</button>
		</div>
		
		<script type="text/javascript">
				var app = new Vue({
					el: "#container",
					data:{
						isAgree: false,
						btn_: "btn",
						ft:{fontSize:'25px'},
						bg:{backgroundColor: "red"}
					}
				})
		</script>
	</body>
</html>
